<template>
  <div class="main">
    <!-- 网页头部 -->
    <div class="head" :style="style"></div>
    <!-- 书名 -->
    <div class="outer">
      <div class="header-inner">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">原创作品</el-breadcrumb-item>
          <el-breadcrumb-item>言情小说</el-breadcrumb-item>
          <el-breadcrumb-item>年少无为</el-breadcrumb-item>
        </el-breadcrumb>
        <h1 class="header-title-h1 mt-5">年少无为</h1>
      </div>
    </div>
    <!-- 作者相关信息 -->
    <div class="outer">
      <div class="z-author" align="center">
        <img :src="img1" alt="" class="up-pic" />
        <div class="author-name">
          <a href="#" class="name-a">宝儿盖</a>
        </div>
      </div>
    </div>
    <!-- 书的简介 -->
    <div class="outer">
      <div class="up-summary">
        <div class="highlight">
          废柴少女遇上天才游戏开发师，在蹭吃、蹭喝、蹭住后，她从小跟班升级成了“老板娘”？
        </div>
        <div class="block">
          <el-rate v-model="value1"></el-rate>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      img: "/image/web_detail/v-column.png",
      img1: "/image/web_detail/up55850053-20.jpg",
      style: {
        backgroundImage: "url(/image/web_detail/20.jpg)",
      },
      // 评分
      value1: null,
    };
  },
};
</script>
<style lang="scss">
.main {
  position: relative;

  .head {
    width: 100%;
    height: 350px;
    position: absolute;
    right: 0;
    left: 0;

    z-index: -1;
    background-position: center;
    background-size: cover;
  }

  // 背景渐变
  .head::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 350px;
    background-image: linear-gradient(transparent, rgb(248, 249, 249));
  }
}
// 评分
.block {
  width: 592px;
  margin: 0 auto;
  .el-rate {
    padding-left: 240px;
  }
}
// <!-- 作者相关信息 -->
.outer {
  .z-author {
    width: 592px;
    height: 64px;
    margin: 0 auto;

    .up-pic {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .name-a {
      top: 20px;
      margin: auto;
      font-size: 13px;
      text-decoration: none;
      font-weight: bold;
      color: #333;
    }
  }
}
.outer {
  width: 1200px;
  margin: 0 auto;
  .header-inner {
    width: 740px;
    height: 183px;
    margin: 0 auto;
    .el-breadcrumb__inner {
      display: inline-block;
      padding: 0 20px;
      height: 26px;
      border-radius: 26px;
      text-decoration: none;
      background-color: rgba(255, 255, 255, 0.5);
      color: #333;
      line-height: 26px;
    }
    .el-icon-arrow-right {
      margin: 0 3px;
      color: black;
      font-weight: 600;
    }
    .header-title-h1 {
      text-align: center;
    }
  }
}
</style>